<template>
    <!-- 森林火情火险等级专题图 -->
    <div class="fireLegend">
        <div class="legendTitle">图例</div>
        <div class="legendBox">
            <div
                class="legendItem"
                v-for="(item, index) of fireLevel"
                :key="index"
            >
                <span
                    class="colorBlock"
                    :style="{ background: item.color }"
                ></span>
                <span class="title">{{ item.title }}</span>
            </div>
        </div>
    </div>
</template>

<script>
let shpLayer = null;
let cityLabel = [];
export default {
    name: "SjzxLeftThemePicFire",
    data() {
        return {
            fireLevel: [
                { color: "rgba(255, 0, 0, 0.6)", title: "一级火险区" },
                { color: "rgba(255, 128, 0, 0.6)", title: "二级火险区" },
                { color: "rgba(255, 255, 0, 0.6)", title: "三级火险区" },
            ],
            cityCenter: {
                海口市: [110.198418, 20.045805],
                三亚市: [109.511709, 18.252865],
                三沙市: [112.234483, 16.774644],
                儋州市: [109.580812, 19.520948],
                五指山市: [109.516784, 18.774827],
                文昌市: [110.797473, 19.544234],
                琼海市: [110.474524, 19.259112],
                万宁市: [110.392605, 18.793697],
                东方市: [108.651829, 19.095187],
                定安县: [110.358001, 19.681215],
                屯昌县: [110.101667, 19.351662],
                澄迈县: [110.007497, 19.738885],
                临高县: [109.690508, 19.912025],
                白沙黎族自治县: [109.4429, 19.221641],
                昌江黎族自治县: [109.055783, 19.298139],
                乐东黎族自治县: [109.173384, 18.750063],
                陵水黎族自治县: [110.037553, 18.506045],
                保亭黎族苗族自治县: [109.700373, 18.640156],
                琼中黎族苗族自治县: [109.838389, 19.033369],
            },
        };
    },
    mounted() {
        this.addShp();
    },
    methods: {
        // 添加火险等级专题图
        addShp() {
            shpLayer = viewer.imageryLayers.addImageryProvider(
                new Cesium.WebMapServiceImageryProvider({
                    //url:'http://36.112.11.166:8310/geoserverplus/gwc/service/wms?layer=icenter:森林灾害等级Copy-PNG-4326&TILED=true',
                    url: "http://172.25.110.35:8310/geoserverplus/gwc/service/wms",
                    layers: `icenter:森林火险等级县级行政区划图-PNG-4326`,
                    parameters: {
                        service: "WMS",
                        format: "image/png",
                        style: "",
                    },
                    tileWidth: 256,
                    tileHeight: 256,
                    srs: "EPSG:4326",
                })
            );
            for (var key in this.cityCenter) {
                let label = viewer.entities.add({
                    id: key, //渔船没有id,其他都是id
                    position: Cesium.Cartesian3.fromDegrees(
                        this.cityCenter[key][0],
                        this.cityCenter[key][1]
                    ),
                    label: {
                        text: key,
                        show: true,
                        font: "15pt Source Han Sans CN", //字体样式
                        fillColor: Cesium.Color.LAWNGREEN, //字体颜色
                        outlineColor: Cesium.LabelStyle.BLACK,
                        style: Cesium.LabelStyle.FILL_AND_OUTLINE, //label样式
                        outlineWidth: 4,
                        // heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                        verticalOrigin: Cesium.VerticalOrigin.TOP, //垂直位置
                        horizontalOrigin: Cesium.HorizontalOrigin.CENTER, //水平位置
                        pixelOffset: new Cesium.Cartesian2(0, -10), //偏移
                        scaleByDistance: new Cesium.NearFarScalar(
                            100000,
                            1.5,
                            1000000,
                            0.5
                        ),
                        // distanceDisplayCondition: ele.distance?new Cesium.DistanceDisplayCondition(labelDistance[ele.distance][1], labelDistance[ele.distance][0]):new Cesium.DistanceDisplayCondition(0,6000),
                    },
                });
                cityLabel.push(label);
            }
        },
        // 清除火险等级专题图
        clearShp() {
            shpLayer && viewer.imageryLayers.remove(shpLayer);
            shpLayer = null;
            cityLabel.forEach((ele) => {
                viewer.entities.remove(ele);
            });
            cityLabel = [];
        },
    },
    beforeUnmount() {
        this.clearShp();
    },
};
</script>

<style lang="stylus" scoped>
.fireLegend {
    position: fixed;
    left: 20px;
    bottom: 10px;
    width: 200px;
    padding-bottom: 20px;
    background: url('/images/sjzx/tuli.png') no-repeat;
    background-size: 100% 100%;
    display: flex;
    z-index: 3;
    flex-direction: column;

    .legendTitle {
        width: 100%;
        height: 30px;
        line-height: 30px;
        padding-top: 5px;
        color: #FEBF65;
        font-size: 20px;
        text-align: center;
    }

    .legendBox {
        margin-top: 10px;
        margin-left: 10px;

        .legendItem {
            display: flex;
            align-items: center;
            margin-bottom: 20px;

            &:last-child {
                margin-bottom: 0;
            }

            .colorBlock {
                width: 20px;
                height: 20px;
                margin-right: 10px;
            }
        }
    }
}
</style>